<template>
  <div id="app">
    <!-- directive -->
    <div class="images" v-viewer>
      <img src="https://picsum.photos/200/200">
      <img src="https://picsum.photos/300/200">
      ...
    </div>
    <!-- component -->
    <viewer :images="images">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      images: [
        'https://picsum.photos/200/200', 'https://picsum.photos/300/200'
      ]
    }
  }
}
</script>

<style  lang="less" scoped>
@import './style.less';
</style>
